<script lang="ts" setup>
import { setUserPassword } from '@/api/user';
import { useUserStore } from '@/stores/user';
import { useUserProfileStore } from '@/stores/userProfile';
import { validatePassword, validatePhoneNumber } from '@/utils/validate';
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';

const userStore = useUserStore()
const {userInfor} =  useUserProfileStore()

const userPhoneNumber = reactive({
  phoneNumber:'',
  verCode:'',
  password:''
})

const save = async() => {
  if(!validatePhoneNumber(userPhoneNumber.phoneNumber)){
    ElMessage.error("手机号码格式无效");
    return
  }
  if(userPhoneNumber.phoneNumber !== userInfor.phoneNumber){
    ElMessage.error("手机号不匹配")
    return
  }
  if(userPhoneNumber.verCode !== '1234'){
    ElMessage.error("验证码错误")
    return
  }
  if(!validatePassword(userPhoneNumber.password)){
    ElMessage.error("密码必须至少包含6个字符，并且至少有一个大小写字母");
    return
  }
  const {data} = await setUserPassword(userPhoneNumber.password)
  if(data.code === 1) {
    ElMessage.success("密码修改成功")
    return
  }
  if(data.msg){
    ElMessage.error(data.msg)
    return
  }
  ElMessage.error("密码修改失败")



}

</script>

<template>
  <div class="setpassword-head">
    <h2>修改密码</h2>
    <hr>
    <div class="setpassword-main">
      <div class="setpassword-detail">
        <div class="info">
          <span>手机号</span>
          <el-input v-model="userPhoneNumber.phoneNumber" style="width: 240px" placeholder="手机号" />
        </div>

        <div class="info">
          <span>验证码</span>
          <el-input v-model="userPhoneNumber.verCode" style="width: 240px" placeholder="验证码">
            <template #append>
              <a class="verification_code" @click="userStore.startCountdown(userPhoneNumber.phoneNumber,'phone')">
                {{ userStore.buttonText }}
              </a>
            </template>
          </el-input>
        </div>
        <div class="info">
          <span>密码</span>
          <el-input v-model="userPhoneNumber.password" style="width: 240px" placeholder="新密码" />
        </div>
      </div>
    </div>
    <div class="set-user">
      <el-button @click="save">保存</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.setpassword-head {
  h2 {
    color: white;
  }
  .setpassword-main {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
    color: white;
    .setpassword-detail {
      display: flex;
      flex-direction: column;
      gap: 40px;
      .info {
        span {
          display: flex;
          align-items: center;
        }

        display: flex;
        justify-content: space-between;
        width: 500px;
      }

      .verification_code {
        padding: 0 10px;
        color: black;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .set-user{
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
